import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { UserOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { getAttendanceHistory } from '../../api/attendance';

const AdminAttendanceStats = () => {
    const [stats, setStats] = useState({
        total: 0,
        normal: 0,
        late: 0,
        absent: 0
    });

    useEffect(() => {
        fetchAttendanceStats();
    }, []);

    // 获取考勤统计数据
    const fetchAttendanceStats = async () => {
        try {
            const today = new Date();
            const startDate = new Date(today.getFullYear(), today.getMonth(), 1);
            const endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);

            const response = await getAttendanceHistory({
                startDate: startDate.toISOString().split('T')[0],
                endDate: endDate.toISOString().split('T')[0]
            });

            const data = response.data || [];
            const statistics = {
                total: data.length,
                normal: data.filter(record => record.status === 2).length,
                late: data.filter(record => record.status === 3).length,
                absent: data.filter(record => record.status === 5).length
            };

            setStats(statistics);
        } catch (error) {
            console.error('获取考勤统计失败:', error);
        }
    };

    return (
        <Card title="本月考勤统计">
            <Row gutter={[16, 16]}>
                <Col xs={12} sm={6}>
                    <Statistic
                        title="应到人数"
                        value={stats.total}
                        prefix={<UserOutlined />}
                    />
                </Col>
                <Col xs={12} sm={6}>
                    <Statistic
                        title="正常出勤"
                        value={stats.normal}
                        prefix={<CheckCircleOutlined />}
                        valueStyle={{ color: '#3f8600' }}
                    />
                </Col>
                <Col xs={12} sm={6}>
                    <Statistic
                        title="迟到人数"
                        value={stats.late}
                        prefix={<ClockCircleOutlined />}
                        valueStyle={{ color: '#faad14' }}
                    />
                </Col>
                <Col xs={12} sm={6}>
                    <Statistic
                        title="缺勤人数"
                        value={stats.absent}
                        prefix={<CloseCircleOutlined />}
                        valueStyle={{ color: '#cf1322' }}
                    />
                </Col>
            </Row>
        </Card>
    );
};

export default AdminAttendanceStats;